<template>
  <div>
    <!-- position -->
    <div class="position">
      <Breadcrumb>
          <BreadcrumbItem to="/"><Icon type="ios-home-outline"/>首页</BreadcrumbItem>
          <BreadcrumbItem to="/cloudVideo">我的诊室</BreadcrumbItem>
          <BreadcrumbItem>患者列表</BreadcrumbItem>
      </Breadcrumb>
    </div>

    <!-- tabs -->
   
    <div class="hd pd20">
       <div  class="title-1">
         <div class="inner">患者列表</div>
        </div>

      <div class="tab-content" v-if="tab === 'tab1'">
        <ul class="days">
          <li v-for="(day, i) in days" :key="i" :class="{active: i === index}" @click="dayClickHandle(i)">
            <div class="days-date">{{day.date}}</div>
            <div class="days-subtitle">{{day.subtitle}}</div>
            <div class="days-arrow" v-if="i === index"></div>
          </li>
        </ul>

        <div class="tabcard-wrap mt20">
          <ButtonGroup size="large">
            <Button type="warning">
                待就诊 3
            </Button>
            <Button  type="default">
                就诊中 15
            </Button>
            <Button  type="default">
                已就诊 6
            </Button>
            <Button  type="default">
                全部 24
            </Button>
        </ButtonGroup>
        </div>
        

      </div>
      <div class="tab-content mt20">
         <Table :columns="columns1" :data="data1"></Table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tab: 'tab1',
      index: 0,
      days: [
        {
          date: '11月01日',
          subtitle: '今天'
        },
        {
          date: '11月02日',
          subtitle: '周五'
        },
        {
          date: '11月03日',
          subtitle: '周六'
        },
        {
          date: '11月04日',
          subtitle: '周日'
        },
        {
          date: '11月05日',
          subtitle: '周一'
        },
        {
          date: '11月06日',
          subtitle: '周二'
        },
        {
          date: '11月07日',
          subtitle: '周三'
        },
        
      ],
      columns1: [
        {
          title: '来源',
          key: 'from',
          width: 80
        },
        {
          title: '门诊号码',
          key: 'num',
          width: 100
        },
        {
          title: '姓名',
          key: 'realname',
          width: 100
        },
        {
          title: '性别',
          key: 'sex',
          width: 80
        },
        {
          title: '年龄',
          key: 'age',
          width: 80
        },
        {
          title: '序号',
          key: 'serial',
          width: 100
        },
        {
          title: '状态',
          key: 'state'
        },
        {
          title: '证件号码',
          key: 'idcard'
        },
        {
          title: '来源机构',
          key: 'source'
        },
        {
          title: '操作',
          key: 'opration',
          width: 100,
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              // h('Button', {
              //   props: {type: 'primary', size: 'small', ghost: true},
              //   style: {marginRight: '5px'},
              //   on: {
              //     click: () => {this.show(params.index)}
              //   }
              // }, '发起视频'),
              // h('Button', {
              //   props: {type: 'primary', size: 'small', ghost: true},
              //   style: {marginRight: '5px'},
              //   on: {
              //     click: () => {this.show(params.index)}
              //   }
              // }, '发短信'),
              h('Button', {
                props: {type: 'primary', size: 'small', ghost: true},
                style: {marginRight: '5px'},
                on: {
                  click: () => {
                    // this.show(params.row.realname)
                    this.$router.push('/cloudVideo/patientDetail')
                  }
                }
              }, '详情')
            ])
          }
        }
      ],
      data1: [{
        from: '个人',
        num: '152402',
        realname: '张三',
        sex: '男',
        age: '65',
        serial: '02',
        state: '等待中',
        idcard: '41558125515662522',
        source: '滨江区卫生院',
        lastlogin: '1小时前',
        opration: 'caoz'
      }]
    }
  },
  methods: {
    tabChange (tab) {
      this.tab = tab
    },
    dayClickHandle (i) {
      this.index = i
    },
    show (index) {
      this.$Modal.info({
        title: '提示',
        content: index
      })
    }
  }
}
</script>

<style scoped lang="less">
@border-color: #51B6FA;

.days {
  display: flex;
  justify-content: center;
  background: #F3F7F8;
  text-align: center;
  > li{
    font-size: 14px;
    margin-right: 40px;
    padding: 10px;
    position: relative;
    cursor: pointer;
    color: #666;
    &.active {
      color: #fff;
      background: @border-color;
    }
    .days-arrow {
      position: absolute;
      bottom: -8px;
      left: 30px;
      width: 16px;
      height: 16px;
      background: @border-color;
      border-left:1px solid @border-color;
      border-top:1px solid @border-color;
      transform: rotate(-135deg)
    }
  }
}
.tabcard-wrap {
  text-align: center;
}
</style>
